<template>
  <p>eat: {{ obj.hobby.eat }}</p>
  <button @click="obj.hobby.eat = '面条'">update eat</button>
</template>

<script>
import { watch, ref, reactive, isReactive } from 'vue'
export default {
  setup() {
    const obj = reactive({
      hobby: {
        eat: '西瓜',
      },
    })
    // A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.
    // watch(obj.hobby.eat, () => {})
    // 想监听简单数据类型
    watch(
      () => obj.hobby.eat,
      (newValue, oldValue) => {
        console.log(newValue, oldValue)
      }
    )
    return { obj }
  },
}
</script>
